<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>layui-demo</title>
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
        <script src="layui/layui.js"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <!-- cdn -->
        <!-- <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://www.layuicdn.com/layui/layui.js"></script> -->
    </head>

    <body>
        <!--这是地图的div-->
        <div id="allmap" style="width: 100%;height: 450px;"></div>
        <!--这是地址详情框-->
        <input type="text" id="site">
        <!--这是 经度-->
        <input type="text" id="longitude">
        <!--这是 维度-->
        <input type="text" id="latitude">

        <script>
            //Demo
            layui.use(['form', 'element', 'layer'], function() {
                var form = layui.form;
                var element = layui.element;
                var layer = layui.layer;
                var $ = layer.jquery;
            });


            // 百度地图API功能
            var map = new BMap.Map("allmap");
            map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
            map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
            map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
            map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
            var point = new BMap.Point(107.31612162513613, 30.43983123446668); //当前坐标经纬可改
            map.centerAndZoom(point, 17); //显示级数越大越细
            map.addOverlay(new BMap.Marker(point)); //定点坐标红点覆盖
            map.enableScrollWheelZoom(true);
            var geoc = new BMap.Geocoder();

            map.addEventListener("click", function(e) {
                //通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
                var pt = e.point;
                geoc.getLocation(pt, function(rs) {
                    //addressComponents对象可以获取到详细的地址信息
                    var addComp = rs.addressComponents;
                    var site = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " +
                        addComp.street + ", " + addComp.streetNumber;
                    //将对应的HTML元素设置值
                    $("#site").val(site);
                    $("#longitude").val(pt.lng);
                    $("#latitude").val(pt.lat);
                });
            });

            //layer.alert('见到你真的很高兴', {icon: 6});
        </script>
    </body>
</html>








